<template>
  <div class="container">
    <el-upload
      class="upload-demo"
      drag
      action="http://localhost:8086/user/file/upload/paymentCode"
      :headers="{Authorization: token}"
	  :on-success="handleSuccess"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或 <em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      <div class="el-upload__tip" slot="tip">注意，如多次上传则是最新的二维码为准</div>
    </el-upload>
    <div class="demo-image__placeholder" v-if="show">
      <div class="block">
        <span class="demonstration" slot="tip">已上传</span>
        <el-image :src="imageUrl" style="width: 200px; height: 200px;">
          <div slot="placeholder" class="image-slot">
            未上传<span class="dot">...</span>
          </div>
        </el-image>
      </div>
    </div>
  </div>
</template>

<script>
import { Upload } from 'element-ui';
var http = require("../../utils/http.js");
var util = require("../../utils/util.js");
var config = require("../../utils/config.js");
export default {
  components: {
    [Upload.name]: Upload
  },
  data() {
    return {
      token: '', // 初始化一个 token 变量
      imageUrl:'',
	  show:false,
    };
  },
  methods: {
    showImage() {
      // 查询图片的方法，这里可以自行实现图片查询逻辑
      // 假设查询成功后，将图片链接赋值给imageUrl，并将show设置为true
	  var params = {
	  	url: "/user/file/getParment",
	  	method: "get",
		responseType:"arraybuffer",
		callBack: res => {
		  let blob = new Blob([res],{type: 'image/jpeg'});   // 返回的文件流数据
		  this.imageUrl = window.URL.createObjectURL(blob)
		  // 增加type 配置，设置下载资源的类型
		  console.log("imageUrl",this.imageUrl)
          this.setData({
            src: this.imageUrl
          });
        }
	  };
	  uni.hideLoading();
	  http.request(params)
      this.show = true;
  
    },  
	handleSuccess(response, file, fileList) {
      // 上传成功回调方法
	  this.showImage()
    }
	},
  created() {
	this.showImage()
    this.token = localStorage.getItem('token'); // 在 created 钩子中获取 token 值
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column; /* 将布局改为上下布局 */
  justify-content: center;
  align-items: center;
  height: 70vh; /* 或者根据需要设置容器高度 */
}

.el-image {
  margin-top: 0px; /* 调整图片组件与上传组件之间的间距 */
}

.block {
  margin-bottom: 30px; /* 调整图片组件之间的间距 */
}

.demonstration {
  display: block;
  text-align: center;
  font-family: "宋体", "SimSun", sans-serif; /* 设置字体为宋体 */
  color: #777; 
}
</style>
